<template>
    <div>
        <page-view>
            <page-header title="新增地址" :showBack="true"></page-header>

            <div class="content-box">
                <address-edit
                    :area-list="areaList"
                    show-postal
                    show-delete
                    show-set-default
                    show-search-result
                    :search-result="searchResult"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave"
                    @delete="onDelete"
                    @change-detail="onChangeDetail"
                    />
            </div>
        </page-view>

    </div>
</template>

<script>
import { AddressEdit,Area } from 'vant';
import PageHeader from '../components/PageHeader.vue';
import { ref } from 'vue';
export default {
    components:{AddressEdit,Area},
    setup () {
        const searchResult = ref([]);

    const onSave = () => Toast('save');
    const onDelete = () => Toast('delete');
    const onChangeDetail = (val) => {
        if (val) {
            searchResult.value = [
            {
                name: '黄龙万科中心',
                address: '杭州市西湖区',
            },
            ];
        } else {
            searchResult.value = [];
        }
        };

        return {
        onSave,
        onDelete,
        areaList,
        searchResult,
        onChangeDetail,
        };
    }
}
</script>

<style lang="scss" scoped>
.content-box{
    height: 100%;
}
</style>